<template>
    <DialogComponent class="custom-dialog" :layer="accountDialogParams" @update:visible="closeAcountDialog" @confirm="confirmAcountDialog(ruleFormRef)">
        <div>
            <el-form ref="ruleFormRef" :model="accountInfo" :rules="rules" :label-width="labelWidth" status-icon class="demo-form-inline">
                <el-form-item label="登录名" prop="loginName">
                    <el-col :span="16">
                        <el-input v-model="accountInfo.loginName" placeholder="请输入登录名" maxlength="50" show-word-limit clearable/>
                    </el-col>
                    <el-col class="pl12 c-999" :span="8">
                        登录名允许填写英文+数字
                    </el-col>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-col :span="16">
                        <el-input v-model="accountInfo.mobile" placeholder="请输入手机号" maxlength="11" :disabled="!!accountInfo.userId" clearable/>
                    </el-col>
                </el-form-item>
                <el-form-item :label="accountInfo.userId?'重置密码':'登录密码'" prop="pwd">
                    <el-col :span="16">
                        <el-input v-model="accountInfo.pwd" maxlength="16" :placeholder="accountInfo.userId?'重置密码':'请输入登录密码'" clearable/>
                    </el-col>
                </el-form-item>
                <el-form-item label="用户姓名">
                    <el-col :span="16">
                        <el-input v-model="accountInfo.userName" maxlength="20" placeholder="请输入用户姓名" clearable/>
                    </el-col>
                </el-form-item>
                <el-form-item label="状态">
                    <el-col :span="16">
                        <el-radio-group v-model="accountInfo.yn" class="ml-4">
                            <el-radio :label="true">启用</el-radio>
                            <el-radio :label="false">禁用</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注">
                    
                    <el-col :span="16">
                        <el-input type="textarea" v-model="accountInfo.comments" maxlength="200" show-word-limit placeholder="请填写备注（选填）"/>
                    </el-col>
                </el-form-item>
            </el-form>
        </div>
    </DialogComponent>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import DialogComponent from '@/components/dialogComp.vue'
import { deepCopy } from '@/lib/tools.js';
export default {
    components: { DialogComponent },
    props: {
        accountDialogParams: {
            type: Object,
            default: () => {
                return {}
            },
            required: true
        },
        account: {
            type: Object,
            default: () => {
                return null
            }
        }
    },
    emits: ['dialog:confirm', 'dialog:close'],
    setup(props, ctx) {
        const store = useStore()
        const ruleFormRef = ref()
        const labelWidth = ref('90px')
        const { account } = toRefs(props)
        console.log('account', account, account.value)
        const accountInfo = reactive(account.value?deepCopy(account.value):{
            loginName: '',
            mobile: '',
            pwd: '',
            username: '',
            yn: true,
            comments: ''
        })
        const validateLoginName = (rule, value, callback) => {
            const reg = /[\u4E00-\u9FA5]/g
            if (value&&reg.test(value)) {
                callback(new Error('登录名格式错误'))
            } else {
                callback()
            }
        }
        const validatePhone = (rule, value, callback) => {
            console.log('value', value)
            const reg = /^[1][0-9]{10}$/g 
            if (value&&!reg.test(value)) {
                callback(new Error('手机号格式错误'))
            } else {
                callback()
            }
        }
        const validatePass = (rule, value, callback) => {
            const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{8,16}$/
            if (value&&!reg.test(value)) {
                callback(new Error('密码长度限制为8~16位,需包含字母、数字,不支持空格'))
            } else {
                callback()
            }
        }
        const rules = reactive({
            loginName: [
                { required: true, message: '请输入登录名', trigger: 'blur' },
                { validator: validateLoginName, trigger: 'blur' }
            ],
            mobile: [
                {
                    required: true,
                    message: '请输入手机号',
                    trigger: 'change'
                },
                { validator: validatePhone, trigger: 'blur' }
            ],
            pwd: [
                { required: !accountInfo.userId, message: '请输入登录密码', trigger: 'blur' },
                { validator: validatePass, trigger: 'blur' }
            ]
        })
        // 新增用户
        const addUser = () => {
            store.dispatch('proxyAction', {
                name: 'wandAddUser',
                data: {
                    ...accountInfo
                }
            }).then((res) => {
                store.dispatch('message', {
                    message: '账号创建成功'
                })
                ctx.emit('dialog:confirm')
            }, (error) => {
                console.log('error', error)
            })
        }
        // 编辑用户
        const editUser = () => {
            store.dispatch('proxyAction', {
                name: 'wandEditUser',
                data: {
                    ...accountInfo
                }
            }).then((res) => {
                store.dispatch('message', {
                    message: '账号编辑成功'
                })
                ctx.emit('dialog:confirm')
            }, (error) => {
                console.log('error', error)
            })
        }
        // 关闭添加账号对话框
        const closeAcountDialog = () => {
            console.log('accountDialogParams', props.accountDialogParams.value)
            // props.accountDialogParams.value.show = false;
            ctx.emit('dialog:close')
        }
        // 账号对话框confirm
        const confirmAcountDialog = (formEl) => {
            formEl.validate((valid, fields) => {
                console.log('valid', valid)
                if (valid) {
                    if (accountInfo.userId) {
                        editUser()
                    } else {
                        addUser()
                    }
                } else {
                    console.log('error submit!', fields)
                }
            })
            // props.accountDialogParams.value.show = false;
            // ctx.emit('dialog:confirm')
        }
        return {
            ruleFormRef,
            labelWidth,
            accountInfo,
            rules,
            closeAcountDialog,
            confirmAcountDialog
        };
    }
}
</script>
<style scoped>
.pl12 {
    padding-left: 12px;
}
.c-999 {
    color: #999;
}
</style>